/*
 * @Author: liyongxuan
 * @Date: 2018-1-10 10:37:42
 * @Last Modified by: liyongxuan
 * @Last Modified time: 2018-1-10 10:37:42
 * @description：项目管理-拟投资-项目详情头部
 */
<template>
    <div class="ca-box ca-p-20">
        <div class="header" v-if="!editHeader">
            <div class="header__photo">
                <div class="csLogoImgEdit">
                    <csLogoImg :item="resultData"></csLogoImg>
                </div>
            </div>
            <div class="header__body">
                <div>
                    <div class="itemName">
                        <el-tag color="#3aa2fa" size="small" class="font-color">拟投资</el-tag>
                        <el-tag color="#F56C6C" size="small" class="font-color">已投资</el-tag>
                        {{resultData.itemFullname}}
                        <span class="color9">{{"（"+resultData.itemName+"）"}}</span>
                        <el-button type="text" class="ca-edit-btn el-icon-edit float-right" v-if="isNoAuth('拟投资项目-项目详情-编辑')" @click="editHeadInfo">编辑</el-button>
                    </div>
                    <div v-if="!transform">
                      <el-button type="primary" size="mini" v-if="isNoAuth('拟投资项目-项目详情-一键转投后')&&goInvestedProjectFlag&&resultData.additional==0" @click="goInvestedProject">一键转投后</el-button>
                    </div>
                    <div v-else>
                      <el-button type="primary" size="mini" v-if="isNoAuth('项目库-项目详情-一键转拟投资')&&goInvestedProjectFlag" @click="goInvestedProject">一键转拟投资</el-button>
                    </div>
                </div>
                <el-row class="ca-m-t-10">
                    <el-col :span="8">
                        <span class="font14 color3">项目经理：</span>
                        <span class="font14" v-for="(item,index) in resultData.quasiUserRelEntityList" :key="index" v-if="item.type==1">{{item.userName}}</span>
                    </el-col>
                    <el-col :span="8">
                            <span class="font14 color3">拟投资规模（万元）：</span>
                            <span class="color-money font14">{{resultData.investAmount|format1}}</span></el-col>
                    <el-col :span="8">
                        <span class="font14 color3">行业：</span>
                        <span class="ca-m-r-5 font14">{{resultData.itemIndustryEntity|getNameById('industry')}}</span>
                    </el-col>
                </el-row>
                <el-row class="ca-m-t-10">
                    <el-col :span="24">
                        <span class="font14 color3">拟{{FOF?"投资":"设立"}}基金：</span>
                        <span v-if="item.type==3" class="ca-m-r-5 font14" v-for="(item,index) in resultData.itemRelEntityList" :key="index">{{item.name}}</span>
                    </el-col>
                </el-row>
                <el-row class="ca-m-t-10">
                    <el-col :span="24">
                        <span class="font14 color3">拟退出方式：</span>
                        <span class="ca-m-r-5 font14" v-for="(item,index) in resultData.exitEntityList" :key="index">{{item|getNameById('itemExit')}}</span>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div v-if="!editHeader">
            <el-row>
                <el-row class="ca-scoped-title">
                    <h3>项目组成员：</h3>
                    <table class="ca-table ca-m-t-15 ca-tale-th-pad">
                        <tr>
                            <th width="75%">项目成员</th>
                            <th width="25%">时间</th>
                        </tr>
                        <tr class="rowCss" v-for="(item,index) in projectTeamUsers" :key="index">
                            <td>
                                <span v-for="(x,index) in item.userName" key="index">{{x}}&nbsp;&nbsp;</span>
                            </td>
                            <td >
                                <span>{{$moment(item.groupDate).format('YYYY-MM-DD hh:mm:ss A')}}</span>
                            </td>
                        </tr>
                    </table>
                </el-row>
            </el-row>
        </div>
        <csHeader v-if="editHeader" :isEdit="true" :headerDataEdit="resultData" :itemId="itemId" :proManage="projectManage" :quasiInvestmentFund="quasiInvestmentFund" :projectTeamUsers="projectTeamUsers" @close="closeEdit"></csHeader>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                itemIndustryEntity: '',//行业
                goInvestedProjectFlag: true,//一键转投后flag
                editHeader: false,
                resultData: {},
                projectManage: '',//项目经理
                quasiInvestmentFund: [],//拟投资基金
                projectTeamUsers: [],//项目组成员
                proMan: null,
                userEntityList: this.$store.state.user.department.userEntityList,//用户列表
            }
        },
        watch: {
            'resultData.quasiUserRelEntityList': {
                handler: function (val) {
                    val.map(u => {
                        if (u.type === 1) {
                            this.proMan = u.userId
                        }
                    })
                    this.$emit('projectMan', this.proMan)
                },
                deep: true
            }
        },
        props: {
            itemId: {
                type: String,
                default: ''
            },
            transform: {
              type: Boolean,
              default: false
            }
        },
        mounted() {
            this.getItemQuasiEntityTop()
        },
        methods: {
            // 关闭
            closeEdit() {
                this.editHeader = false
                this.getItemQuasiEntityTop()
            },
            // 获取头部信息
            async getItemQuasiEntityTop() {
                const { resCode,data } = await apiHttp(api.GET_ITEM_QUASI_ENTITY_TOP, {itemId: this.itemId});
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.resultData = data
                    this.resultData.itemIndustryEntity = this.resultData.itemIndustryEntity[0]
                    this.projectManage = ''
                    this.projectTeamUsers = []
                    // 获取项目经理
                    if (this.resultData.quasiUserRelEntityList.length > 0) {
                        let proTeamUsers = [], flag = true
                        this.resultData.quasiUserRelEntityList.map((item) => {
                            if (item.type === 1) {
                                this.projectManage = item.userId
                            } else if (item.type === 2) {
                                this.userEntityList.map(i => {
                                    if (i.id === item.userId) {
                                        item.userName = i.userName
                                    }
                                })
                                proTeamUsers.push(item)
                            }
                        })
                        proTeamUsers.map(u => {
                            if (this.projectTeamUsers.length > 0) {
                                this.projectTeamUsers.map((i,index) => {
                                    if (i.groupDate === u.groupDate) {
                                        this.projectTeamUsers[index].userId.push(u.userId)
                                        this.projectTeamUsers[index].userName.push(u.userName)
                                        flag = false
                                    }
                                })
                                if (flag) {
                                    this.projectTeamUsers.push({groupDate: u.groupDate, userId: [u.userId],userName: [u.userName], type: 2})
                                }
                                flag = true
                            } else {
                                this.projectTeamUsers.push({
                                    groupDate: u.groupDate,
                                    userId: [u.userId],
                                    userName: [u.userName],
                                    type: 2
                                })
                            }
                        })
                    }
                    // 拟投资者基金
                    if (this.resultData.itemRelEntityList.length > 0) {
                        this.quasiInvestmentFund = []
                        this.resultData.itemRelEntityList.map(item => {
                            if (item.type === 3) {
                                this.quasiInvestmentFund.push(item.dataId)
                            } else if (item.type === 2) {
                                this.goInvestedProjectFlag = false
                            }
                        })
                    }
                }
            },
            // 编辑头部信息
            editHeadInfo() {
                this.editHeader = true
            },
            // 一键转投后
            goInvestedProject() {
              this.$confirm(`是否转成${this.transform ? '拟投资' : '投后'}项目?`, '提示', {
                  cancelButtonText: '取消',
                  confirmButtonText: '确定',
                  type: 'warning'
              }).then(() => {
                let nameRouter = 'invested-project-add';
                if (this.transform) {
                  nameRouter = 'pre-investment-project-add'
                }
                this.$router.push({name: nameRouter,params: {itemId: this.itemId}})
              });
            }
        },
        components: {
            csHeader: require('./edit'),
            csLogoImg: require('__components/logo-img/index')//logo
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.wid-80{
    width: 80%
}
.f-fs{
    font-size: 30px
}
.float-right{
    float: right;
}
.csLogoImgEdit {
  text-align: center;
  width: 208px;
  height: 147px;
//   border: 1px solid #ccc;
  padding-top: 15px;
  margin-bottom: 25px;
}

.header {
  display: flex;
  height: auto;
}

.header__photo {
  display: flex;
  height: auto;
  justify-content: center;
  margin-right: 20px;
}

.header__body {
  flex: 1;
}

.itemName {
    font-size: 14px;
    padding-bottom: 5px;
}

.itemName span {
    font-size: 12px;
    font-weight: normal;
}
.color9{
    color: #999999
}
.color3{
    color: #666666
}
.font14{
    font-size: 14px;
}
.ca-scoped-title {
    margin-bottom: 10px;
    h3 {
        font-weight: normal;
        font-size: 18px;
        color: #333333;
        float: left;
    }
}
.ca-tale-th-pad th {
    padding: 0px
}
.color-money{
    color: #1386E2
}
.font-color{
    color: #fff
}
.rowCss{
    line-height: 25px;
}
.rowCss td{
    vertical-align: middle;
    padding: 5px 0
}
</style>
